<!DOCTYPE html>
{% load static %}
{% load my_tags %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ blog.title }} | 博客园</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
    <script src="{% static 'js/jquery-3.2.1.js' %}"></script>
    <script src="{% static 'js/bootstrap.js' %}"></script>
    <style>
        .content{
            margin-top: 50px;
        }
        .header{
            height: 70px;
            background-color: #337ab7;

        }
        #title{
            font-size: 40px;
            color: whitesmoke;
            text-underline: none;
            margin-left: 40px;
            float: left;
        }
        .blog_sites li{
            display: inline;
            float: right;
            margin-right: 30px;
        }
        .blog_sites li a{
            color: whitesmoke;
        }
        .blog_sites{
            height: 70px;
            line-height: 70px;
            font-size: 16px;
        }

        {#.user_info_list{#}
        {#    list-style: none;#}
        {#    margin-left: -40px;}#}

    </style>

</head>
<body>

    <div class="header">
        <div class="title">
            <a id="title"> {{ blog.title }}</a>

            <ul class='blog_sites'>
                <li><a>博客园</a></li>
                <li><a>首页</a></li>
                <li><a>新随笔</a></li>
                <li><a>联系</a></li>
                <li><a>订阅</a></li>
                <li><a>管理</a></li>
            </ul>

        </div>

    </div>

    <div class="container-fluid content">
        <div class="col-md-3 left_menu">

            <div class="panel panel-primary">
                  <div class="panel-heading">
                    <h3 class="panel-title">公告</h3>
                  </div>

                  <div class="panel-body">
                    <p>昵称: <a href="#">{{ blog.user.nickname }}</a></p>
                    <p>园龄: <a href="#">{{ blog_age.days }}</a></p>
                    <p>粉丝: <a href="#">{{ fans_list.count }}</a></p>
                    <p>关注: <a href="#">{{ fans_for_list.count }}</a></p>
                      <input type="hidden" value="{{ blog.user.nid }}" id="blog_id">
                      <input type="hidden" value="{{ request.user.nid }}" id="user_id">
                      {% csrf_token %}
                    <p><a href="#" id="fans_for">+加关注</a></p>
                  </div>
            </div>

            <div class="panel panel-success">
                  <div class="panel-heading">
                    <h3 class="panel-title">标签</h3>
                  </div>

                  <div class="panel-body">
                      {% for tag in tag_list %}
{#                          从blog里筛选类别为当前类别的文章的数量, 模板怎么实现  #}
                        <p><a href="?tag={{ tag.title }}">{{ tag.title }}({{tag|tag_count}})</a></p>
                      {% endfor %}
                  </div>

            </div>

            <div class="panel panel-info">
                  <div class="panel-heading">
                    <h3 class="panel-title">分类</h3>
                  </div>

                  <div class="panel-body">
                      {% for cate in cate_list %}
{#                          从blog里筛选类别为当前类别的文章的数量, 模板怎么实现  #}
                        <p><a href="?cate={{ cate.title }}">{{ cate.title }}({{cate|cate_count}})</a></p>
                      {% endfor %}
                  </div>

            </div>

            <div class="panel panel-danger">
                  <div class="panel-heading">
                    <h3 class="panel-title">档案归类</h3>
                  </div>

                  <div class="panel-body">
                  </div>
            </div>

            <div class="panel panel-warning">
                  <div class="panel-heading">
                    <h3 class="panel-title">最新评论</h3>
                  </div>

                  <div class="panel-body">2222</div>
            </div>

        </div>

        <div class="col-md-9">
            <div class="article_list">
                    {% for article in all_articles %}

                    <div class="article_item">
                        <h4 class="post_item_title"><a href="/blog/p/{{ article.nid }}/">{{ article.title }}</a></h4>

                        <div class="row post_item_body">
                            <div class="col-md-11 desc">
                                <p><a href="/blog/p/{{ article.nid }}/">{{ article.desc }}</a></p>
                            </div>
                        </div>

                        <div class="post_item_foot">
                            <a href="#">{{ article.blog.user.username }}</a>&nbsp;&nbsp;
                            <span class="item_create_time">发布于{{ article.create_time|date:"Y-m-d H:i" }}</span>&nbsp;&nbsp;
                            <span class="glyphicon glyphicon-comment" aria-hidden="true">评论({{ article.comment_num }})</span>&nbsp;&nbsp;
                            <span class="glyphicon glyphicon-eye-open">阅读({{ article.read_num }})</span>&nbsp;&nbsp;
                        </div>

                    </div>
                        <hr>
                    {% endfor %}

                </div>
        </div>

    </div>


</body>

    <script>
       $("#fans_for").click(function () {
            alert(1);
            console.log($("#user_id").val());

            // 若当前用户未登录,则直接跳转登录页面
            if (!$("#user_id").val()){
                window.location='/login/'
            }

           $.ajax({
               url: '/fans_for/',
               type: "post",
               // 取到当前博主和当前登录用的id
               data:{'user_id': $("#blog_id").val(),
                   'follower_id':$("#user_id").val(),
                   'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val()
               },
               success: function (data) {
                    console.log(data.msg);
                   if(data.status=='success'){
                        $('#fans_for').text(data.msg)
                   }

               }
           })

       })
    </script>

</html>